<template>
  <div class="school-introduction-wrap">
    <div class="main-content">
      <div class="school-intro">
        <div class="detail-main-title padding-dis">学校简介</div>
        <div class="school-photo">
          <img src="/img/talents/school/school-photo.png">
        </div>
        <div class="intro">
          <div class="intro-content">集美大学诚毅学院创办于2003年，是经国家教育部批准，由集美大学与福建集美大学教育发展基金会合作举办的独立学院。<br>
截止至2018年，学院在校生近14000人，专任教师900多人，占地550多亩，校舍建筑面积30多万平方米，藏书100多万册，教学仪器设备总值8500多万元，设有8个教学系，开设33个本科专业，有在校生16000多人，专任教师900多名。</div>
          <div class="detail-small-title"><p></p>培养管理</div>
          <div class="intro-content margin-ten">集美大学诚毅学院为独立学院，面向福建、北京、天津、河北、山西、辽宁、吉林、黑龙江、上海、江苏、浙江、安徽、江西、山东、河南、湖北、湖南、广东、广西、重庆、四川、陕西、云南、新疆、内蒙古、甘肃、贵州、海南、西藏等29个省（市、自治区）招生。招生纳入国家计划，按各省（市、自治区）有关独立学院招生批次和条件招生。学生修完教学计划规定的全部课程并获得规定的学分，准予毕业，由集美大学诚毅学院颁发经教育部电子注册的普通高等教育本科毕业证书；符合学士学位授予条件的，由集美大学诚毅学院授予相应的学士学位。</div>
          <div class="detail-small-title"><p></p>院系专业</div>
          <div class="intro-content margin-ten">截止2015年1月，学院现已设置机械工程系、信息工程系、食品工程系、商船系、管理系、经济系、人文科学系、体育与艺术系等8个系，开设33个本科专业，初步形成了以工学、管理学、经济学专业为主体，文学、法学、理学、教育学、艺术学专业同步发展的学科专业体系。</div>
        </div>
      </div>
      <div class="school-right">
        <!-- 学生情况 -->
        <div class="student-status">
          <div class="detail-main-title">学生情况</div>
          <div class="student-sistuation">
            <div class="sistuation-item" v-for="item in studentSituation" :key="item.title">
              <div class="item-left">
                <p>{{item.title}}</p>
                <p>{{item.num}}</p>
              </div>
              <div class="item-right">
                <img :src="item.pic">
              </div>
            </div>
          </div>
        </div>
        <!-- 学校要闻 -->
        <div class="school-news">
          <div class="detail-main-title padding-dis">学校要闻</div>
          <div class="news-list">
            <div class="news-item" v-for="(item, index) in schoolHomeNewsList" :key="index">
              <div class="news-date">
                <p>{{item.day}}</p>
                <p>{{item.date}}</p>
              </div>
              <div class="news-info">
                <p>{{item.title}}</p>
                <p>{{item.refer}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教学数据展示 -->
    <div class="teach-data-show">
      <div class="detail-main-title">教学数据展示</div>
      <div class="teach-activity">
        <img src="/img/talents/school/echart.png">
      </div>
      <div class="student-attend">
        <img src="/img/talents/school/student-attend.png">
      </div>
    </div>
  </div>
</template>
<script>
import talents from '@/api/talents'
export default {
  data () {
    return {
      studentSituation: [ // 学生情况
        {
          title: '人才总数',
          num: 3216,
          pic: '/img/talents/school/situation1.png'
        },
        {
          title: '应届生人数',
          num: 768,
          pic: '/img/talents/school/situation2.png'
        }
      ],
      schoolHomeNewsList: talents.schoolHomeNewsList // 学校新闻列表
    }
  }
}
</script>
<style lang="stylus" scoped>
.school-introduction-wrap {
  .main-content {
    display: inline-block;
    margin-top: 30px;
    .school-intro {
      float: left;
      width: 830px;
      padding: 0 20px 20px;
      background: #FFFFFF;
      border-radius: 16px;
      margin-right: 20px
      .school-photo {
        height: 220px;
        font-size: 0
        img {
          height: 220px
        }
      }
      .intro {
        margin-top: 20px;
        padding: 20px 0 12px;
        background: #FAFAFA;
        border-radius: 8px;
        .intro-content {
          font-size: 16px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #404040;
          line-height: 36px;
          padding: 0 20px
        }
        .margin-ten {
          margin-top: 10px
        }
      }
    }
    .school-right {
      float: left;
      width: 350px;
      .student-status {
        background: #FFFFFF;
        border-radius: 16px;
        .student-sistuation {
          padding: 0 20px 20px;
          .sistuation-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 88px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #F1F1F1;
            padding: 0 16px 0 19px;
            margin-top: 10px
            &:first-child {
              margin-top: 0
            }
            .item-left {
              p {
                font-size: 16px;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: #A1A1A1;
                line-height: 16px
                &:last-child {
                  font-size: 24px;
                  font-weight: 500;
                  color: #101010;
                  line-height: 24px;
                  margin-top: 9px
                }
              }
            }
            .item-right {
              width: 85px;
              height: 80px;
              font-size: 0
              img {
                width: 100%;
                height: 100%
              }
            }
          }
        }
      }
      .school-news {
        padding: 0 20px 20px;
        background: #FFFFFF;
        border-radius: 16px;
        margin-top: 20px;
        height: 686px
        .news-list {
          .news-item {
            display: inline-block;
            margin-top: 16px
            &:first-child {
              margin-top: 0px
            }
            .news-date {
              width: 90px;
              height: 90px;
              background: #FAFAFA;
              border-radius: 8px;
              float: left;
              text-align: center;
              padding: 16px 0;
              p {
                font-size: 30px;
                font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                font-weight: bold;
                color: #C3C3C3;
                line-height: 30px;
                &:last-child {
                  font-size: 16px;
                  font-weight: 400;
                  color: #C3C3C3;
                  line-height: 16px;
                  margin-top: 12px
                }
              }
            }
            .news-info {
              float: left;
              margin-left: 12px;
              width: 208px;
              padding: 7px 0;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              height: 90px;
              p {
                font-size: 16px;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: #101010;
                line-height: 24px;
                &:last-child {
                  font-size: 12px;
                  font-weight: 400;
                  color: #A1A1A1;
                  line-height: 12px
                }
              }
            }
          }
        }
      }
    }
  }
  .teach-data-show {
    height: 576px;
    background: #FFFFFF;
    border-radius: 16px;
    margin-top: 30px;
    padding: 0 20px 20px
    .teach-activity {
      float: left;
      width: 462px;
      height: 494px;
      margin-right: 20px;
      font-size: 0
      img {
        width: 100%;
        height: 100%
      }
    }
    .student-attend {
      float: left;
      width: 678px;
      height: 494px;
      font-size: 0
      img {
        width: 100%;
        height: 100%
      }
    }
  }
}
</style>